<template>
    <div class="layout" :class="layoutClass">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "GuluLayout",
    data() {
        return {
            layoutClass: {
                hasSider: false
            }
        };
    },
    mounted() {
        this.$children.forEach(vm => {
            if (vm.$options.name === "GuluSider") {
                this.layoutClass.hasSider = true;
            }
        });
    }
};
</script>

<style lang="scss" scoped>
.layout {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    &.hasSider {
        flex-direction: row;
    }
}
</style>
